<template>
  <div :class="$route.name + '-view-wrap'">
    <header class="header-wrap">
      <div class="left-hand">
        <div class="logo">
          <img src="../assets/images/logo.png" alt="logo" />
        </div>
        <el-menu :default-active="activeIndex" mode="horizontal">
          <el-menu-item index="1">
            <router-link to="/">处理中心</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/">文章列表</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/">关于我们</router-link>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="nav right-band">11123213</div>
    </header>
    <main class="main-wrap">
      <MiddleDialog></MiddleDialog>
    </main>
  </div>
</template>

<script>
import MiddleDialog from "../components/MiddleDialog";
export default {
  name: "index",
  data() {
    return {
      activeIndex: "1"
    };
  },
  methods: {},
  components: {
    MiddleDialog
  }
};
</script>

<style lang="less">
@import "../assets/less/define.less";
.header-wrap {
  height: 60px;
  box-shadow: 0 1px 7px 0 rgba(31, 20, 17, 0.1);
  margin-bottom: 10px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left-hand {
    display: flex;
  }
  .logo {
    img {
      display: block;
      /*width: auto;*/
      /*height: 50px;*/
    }
  }
  .el-menu {
    border-bottom: none;
    .el-menu-item {
      padding: 0;
      a {
        display: block;
        line-height: 60px;
        padding: 0 20px;
      }
    }
  }
}
.main-wrap {
  background: rgba(0, 255, 0, 0.1);
  height: calc(100% - 70px);
  overflow-x: hidden;
  overflow-y: auto;
  img {
    width: 700px;
  }
}
</style>